<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                >新增
                </el-button>
            </el-col>
        </el-row>
  
        <el-table v-loading="loading" :data="invoiceList">
            <el-table-column label="票据名称" prop="invoiceName" :show-overflow-tooltip="true" min-width="150"/>
            <el-table-column label="税率" prop="taxRate" :show-overflow-tooltip="true" min-width="150"/>
            <el-table-column label="标识" prop="identify" :show-overflow-tooltip="true" min-width="150"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                    >修改
                </el-button>
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                    >删除
                </el-button>
            </template>
            </el-table-column>
        </el-table>
  
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
  
        <!-- 添加或修改开票配置对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="票据名称" prop="invoiceName">
                    <el-input v-model="form.invoiceName" placeholder="请输入票据名称"/>
                </el-form-item>
                <el-form-item label="税率" prop="taxRate">
                    <el-input v-model="form.taxRate" placeholder="请输入税率"/>
                </el-form-item>
                <el-form-item label="标识" prop="identify">
                    <el-input v-model="form.identify" placeholder="请输入标识"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
  
      
    </div>
</template>
  
<script>
import { listInvoice, addInvoice, updateInvoice, delInvoice } from '@/api/systemConfig/invoice'

export default {
    name: 'invoice',
    dicts: [],
    data() {
        return {
            // 遮罩层
            // loading: true,
            loading: false,
            // 总条数
            total: 0,
            // 开票表格数据
            invoiceList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                invoiceName: [
                    { required: true, message: '票据名称不能为空', trigger: 'blur' }
                ],
                taxRate: [
                    { required: true, message: '税率不能为空', trigger: 'blur' }
                ],
                identify: [
                    { required: true, message: '标识不能为空', trigger: 'blur' }
                ],
            }

        }
    },
    created() {
      this.getList()
    },
    methods: {
        /** 查询开票配置列表 */
        getList() {
            this.loading = true
            listInvoice(this.queryParams).then(response => {
                this.invoiceList = response.rows
                this.total = response.total
                this.loading = false
            }
            )
        },

        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },

        // 表单重置
        reset() {
            this.form = {
                id: undefined,
                invoiceName: undefined,
                taxRate: undefined,
                identify: undefined,
            }
            this.resetForm('form')
        },

        /** 新增按钮操作 */
        handleAdd() {
            this.reset()
            this.open = true
            this.title = '添加开票配置'
        },

        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset()
            this.form.id = row.id
            this.form.invoiceName = row.invoiceName
            this.form.taxRate = row.taxRate
            this.form.identify = row.identify
            this.open = true
            this.title = '修改开票配置'
        },

        /** 提交按钮 */
        submitForm: function() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.form.id != undefined) {
                        updateInvoice(this.form).then(response => {
                            this.$modal.msgSuccess('修改成功')
                            this.open = false
                            this.getList()
                        })
                    } else {
                        addInvoice(this.form).then(response => {
                            this.$modal.msgSuccess('新增成功')
                            this.open = false
                            this.getList()
                        })
                    }
                }
            })
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            this.$modal.confirm('是否确认删除该数据项？').then(function() {
                return delInvoice(row.id)
            }).then(() => {
                this.getList()
                this.$modal.msgSuccess('删除成功')
            }).catch(() => {
            })
        },

    }
}
</script>